<!-- 模板1 -->
<template>
    <div class="padding-container">
        <!-- 搜索栏 -->
        <el-card class="search">
            <!-- 使用el布局 -->
            <el-row>
                <!-- 左侧搜索信息占80% -->
                <el-col :span="24">
                    <el-col :span="6">
                        <div class="search_grop">
                            字典名称：
                            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchModel.name"
                                size="medium">
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="search_grop">
                            字典类型：
                            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchModel.type"
                                size="medium">
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="search_grop">
                            字典状态：
                            <el-select v-model="searchModel.state" clearable placeholder="请选择" size="medium">
                                <el-option v-for="item in statusList" :key="item.dictValue" :label="item.dictLabel"
                                    :value="item.dictValue">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="search_grop">
                            创建时间：
                            <el-date-picker v-model="searchModel.time" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" size="medium">
                            </el-date-picker>
                        </div>
                    </el-col>
                </el-col>
            </el-row>
        </el-card>
        <!-- 显示栏 -->
        <el-card class="tables">
            <div class="buttons">
                <div class="left_grop">
                    <el-button type="primary" v-waves icon="el-icon-search" size="small" @click="search">搜索</el-button>
                    <el-button type='info' v-waves icon="el-icon-refresh" plain size="small"
                        @click="resetting">重置</el-button>
                    <el-button type="warning" v-waves icon="el-icon-plus" size="small"
                        @click="openEdit(null)">添加</el-button>
                </div>
                <div class="right_grop">
                    <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                        <el-button icon="el-icon-refresh-right" plain size="small" circle></el-button>
                    </el-tooltip>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" v-loading="tableLoading" @expand-change="handleExpandChange">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <!-- 内层为用户列表数组 -->
                        <div style="float: right; width: 96%;">
                            <el-table :data="props.row.children" style="width: 100%" v-loading="props.row.children == null"
                                :show-header="false">
                                <el-table-column prop="dictCode" label="字典编码" align="center" />
                                <el-table-column prop="dictLabel" label="数据名称" align="center" />
                                <el-table-column prop="dictType" label="字典类型" align="center" />
                                <el-table-column prop="dictValue" label="字典键值" align="center" />
                                <el-table-column prop="status" label="字典标签" align="center">
                                    <template slot-scope="scope">
                                        <el-tag type='danger' v-if="scope.row.status == '1'">禁用</el-tag>
                                        <el-tag v-else>启用</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="备注" align="center" />
                                <el-table-column prop="createTime" label="创建时间" align="center" />
                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button type="success" plain v-if="scope.row.status === '1'" size="mini"
                                            @click="toggleDataStatus(scope.row)">启用</el-button>
                                        <el-button type="info" plain v-else size="mini"
                                            @click="toggleDataStatus(scope.row)">禁用</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="dictId" label="字典编号" align="center" width="120">
                </el-table-column>
                <el-table-column prop="dictName" label="字典名称" align="center" width="140">
                </el-table-column>
                <el-table-column prop="dictType" label="字典类型" align="center" width="180">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="80">
                    <template slot-scope="scope">
                        <el-tag type='danger' v-if="scope.row.status == '1'">禁用</el-tag>
                        <el-tag v-else>启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center" width="200">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" width="160">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="mini" @click="openEdit(scope.row.dictId)">增加数据</el-button>
                        <el-button type="success" plain v-if="scope.row.status === '1'" size="mini"
                            @click="toggleTypeStatus(scope.row)">启用</el-button>
                        <el-button type="info" plain v-else size="mini" @click="toggleTypeStatus(scope.row)">禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchModel.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="searchModel.pageSize"
                :pager-count="11" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center" background>
            </el-pagination>
        </div>
        <!-- 弹出框 -->
        <el-dialog v-el-drag :title="dialogTitle" :visible.sync="dialogVisible" width="35%" @close="handleClose">
            <!-- 弹出框详细内容 -->
            <div v-show="isTypeAdd">
                <el-form :model="typeForm" :rules="typeRules" ref="typeFormRef" label-width="100px">
                    <el-form-item label="字典名称" prop="dictName">
                        <el-input v-model="typeForm.dictName"></el-input>
                    </el-form-item>
                    <el-form-item label="字典类型" prop="dictType">
                        <el-input v-model="typeForm.dictType"></el-input>
                    </el-form-item>
                    <el-form-item label="字典状态" prop="status">
                        <el-radio-group v-model="typeForm.status">
                            <el-radio v-for="(item, index) in statusList" :key="index" :label="item.dictValue">{{
                                item.dictLabel }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="字典备注" prop="remark">
                        <el-input v-model="typeForm.remark"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addDictType('typeForm')" :loading="btnLoading">创建</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-show="!isTypeAdd">
                <el-form :model="dataForm" :rules="dataRules" ref="dataFormRef" label-width="100px">
                    <el-form-item label="字典类型">
                        <el-input v-model="dataForm.dictType" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="数据标签" prop="dictLabel">
                        <el-input v-model="dataForm.dictLabel"></el-input>
                    </el-form-item>
                    <el-form-item label="数据键值" prop="dictValue">
                        <el-input v-model="dataForm.dictValue"></el-input>
                    </el-form-item>
                    <el-form-item label="显示排序" prop="dictSort">
                        <el-input v-model="dataForm.dictSort"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="dataForm.status">
                            <el-radio v-for="(item, index) in statusList" :key="index" :label="item.dictValue">{{
                                item.dictLabel }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="dataForm.remark"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addDictData('dataForm')" :loading="btnLoading">创建</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 弹出框尾部插槽 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import waves from "@/directives/waves/index.js"
import ElDrag from "@/directives/ElDrag/index.js"

import dictApi from '@/api/common/dictManage'
export default {
    directives: {
        waves,
        ElDrag
    },
    data() {
        return {
            // 弹出窗类别
            isTypeAdd: true,
            // 类别表单
            typeForm: {},
            // 数据表单
            dataForm: {},
            // 表格加载
            tableLoading: false,
            // 按钮加载
            btnLoading: false,
            // 搜索条件 + 页数 + 每页显示条目数 ，前端发起请求可以直接传入 searchModel 对象
            searchModel: {
                pageNo: 1,
                pageSize: 10,
            },
            // 弹出窗标题
            dialogTitle: '',
            // 弹出窗显示
            dialogVisible: false,
            // 添加 点击的
            // 总条数
            total: 1500,
            // 表单数据
            form: {},
            // 字典状态
            statusList: [],
            // 表格数据
            tableData: [],
            currentExpandRow: [],
            typeRules: {
                dictName: [
                    { required: true, message: '请输入字典名称', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                dictType: [
                    { required: true, message: '请输入字典类型', trigger: 'blur' },
                    { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
                ],
                status: [
                    { required: true, message: '请选择字典状态', trigger: 'change' }
                ]
            },
            dataRules: {
                dictLabel: [
                    { required: true, message: '请输入数据标签', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                dictValue: [
                    { required: true, message: '请输入字典键值', trigger: 'blur' },
                    { min: 1, max: 2, message: '长度在 1 到 2 个字符', trigger: 'blur' }
                ],
                dictSort: [
                    { required: true, message: '请输入数据标签', trigger: 'blur' },
                    { min: 1, max: 2, message: '长度在 1 到 2 个字符', trigger: 'blur' }
                ],
                status: [
                    { required: true, message: '请选择字典状态', trigger: 'change' }
                ]
            },
        }
    },
    methods: {
        // 获取某个用户组中的用户列表
        async handleExpandChange(row) {
            console.log(this.currentExpandRow);
            // const currentID = this.currentExpandRow[0] ? this.currentExpandRow[0] : ''
            // console.log(157, currentID);
            // if (currentID == row.dictId) {
            //     this.currentExpandRow = []
            //     return
            // }
            let currentIndex = 0
            this.tableData.some((item, index) => {
                if (item.dictId === row.dictId) {
                    currentIndex = index
                    return true
                }
            })
            const groupType = row.dictType
            // this.currentExpandRow = [groupID] // 控制展开行
            const resp = await dictApi.getDictData(groupType);
            console.log(this.tableData[currentIndex]);
            this.$set(this.tableData[currentIndex], 'children', resp.data)
        },
        // 弹窗关闭触发
        handleClose() {
            this.$nextTick(() => {
                // 清空数据
                if (this.isTypeAdd) {
                    this.typeForm = {};
                    this.$refs['typeFormRef'].resetFields();
                } else {
                    this.dataForm = {};
                    this.$refs['dataFormRef'].resetFields();
                }
            })
        },
        handleSizeChange(val) {
            this.searchModel.pageSize = val;
            this.search();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.searchModel.pageNo = val;
            this.search();
            console.log(`当前页: ${val}`);
        },
        // 搜索
        search() {
            this.tableLoading = true;
            dictApi.getDictList(this.searchModel).then(resp => {
                // console.log(resp);
                this.tableData = resp.data.rows
                this.total = resp.data.total
                this.tableLoading = false;
            })
        },
        // 重置
        resetting() {
            this.searchModel = {
                pageNo: this.searchModel.pageNo,
                pageSize: this.searchModel.pageSize
            }
        },
        // 添加和修改都走这里
        openEdit(id) {
            if (id) {
                this.dialogTitle = '添加字典数据'            // 添加
                this.isTypeAdd = false;
                // 查询获取到当前字典类别
                dictApi.getDictType(id).then(resp => {
                    console.log(resp.data.dictType);
                    this.dataForm.dictType = resp.data.dictType;
                    this.dialogVisible = true;
                })
            }
            else {
                this.dialogTitle = '添加字典类别'            // 添加
                // 直接添加字典类别
                this.isTypeAdd = true;
                this.dialogVisible = true;
            }
        },

        addDictType() {
            // 添加类别
            this.$refs.typeFormRef.validate((valid) => {
                if (valid) {
                    dictApi.addDictType(this.typeForm).then(resp => {
                        console.log("success!");
                    })
                }
            })
        },
        addDictData() {
            // 添加字典
            this.$refs.dataFormRef.validate((valid) => {
                if (valid) {
                    dictApi.addDictData(this.dataForm).then(resp => {
                        console.log("success!");
                    })
                }
            })
        },

        toggleTypeStatus(row) {
            // 类别禁启
            console.log("进行修改状态，禁用 / 启用", row.status);
            let status = (row.status == 0 ? '1' : '0');
            console.log("status", status);
            dictApi.updateDictType({ dictId: row.dictId, status }).then(resp => {
                this.search()
            })
        },

        toggleDataStatus(row) {
            // 数据禁启
            console.log("进行修改状态，禁用 / 启用");
            let status = (row.status == 0 ? '1' : '0');
            dictApi.updateDictData({ dictCode: row.dictCode, status }).then(resp => {
                this.search()
            })

        },
        getDictStatus() {
            dictApi.getDictData("sys_normal_disable").then(resp => {
                // console.log("状态", resp);
                this.statusList = resp.data;
            })
        },

    },
    created() {
        this.search()
        this.getDictStatus()
    }
}
</script>

<style scoped lang="scss">
.tables {
    padding-top: 0;

    .buttons {
        .left_grop {
            float: left;
            padding: 0 10px;
            margin-left: 5px;
        }

        .right_grop {
            float: right;
            padding: 0 10px;
            margin-right: 5px;
        }
    }
}


.dialog-goods-form .title {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 18px;
}

.dialog-goods-form .el-input {
    width: 400px;
}

.dialog-goods-form .el-select {
    width: 400px;
}

.dialog-goods-list {
    height: 350px;
    overflow-y: auto;
}

::v-deep .el-date-editor--datetimerange.el-input__inner {
    width: 200px !important;
}

::v-deep .el-card__body {
    padding-top: 10px;
}
</style>